<template>
  <div>
    <div class="bg"></div>
    <div class="choujiang_bing cj_warp" style="position: relative;">
      <div class="goodsList_warp" :style="goodsType" v-if="!game_default">
        <div
          class="goodsList"
          v-for="(item,index) in prizeList"
          :key="index"
          style
          :class="goodsList_rotate[index]"
        >
          <div class="goldNum">{{item.dialType}}Q豆</div>
          <img class="goldImg" src="@/assets/ic_glod.png" />
        </div>
      </div>
      <div class="goodsList_warp" :style="goodsType" v-if="game_default">
        <div
          class="goodsList"
          v-for="(item,index) in prizeList"
          :key="index"
          :class="goodsList_rotate[index]"
        >
          <div class="goldNum">{{item.dialType}}Q豆</div>
          <img class="goldImg" src="@/assets/ic_glod.png" />
        </div>
      </div>
      <img
        src="../assets/ic_gameBegin.png"
        class="choujiang_begin"
        v-if="!game_default"
        @click="beginGame()"
      />
      <img src="../assets/ic_gameBegin.png" class="choujiang_begin" v-if="game_default" />
      <img
        src="../assets/ic_bing.png"
        class="choujiang_bing ic_bing"
        v-if="game_default"
        :style="goodsType"
      />
      <img src="../assets/ic_bing.png" class="choujiang_bing ic_bing" v-if="!game_default" />
    </div>
    <div class="activeBg">
      <img src="../assets/ic_activeBg.png" alt />
    </div>
    <div class="hint">每日只有一次转动机会</div>
    <div class="btn" @click="share()">分享</div>
    <div class="btn" @click="getUserMember()">领取体验会员（{{this.haveGetVipTimes}}/5）</div>
    <div class="btn" @click="beginGame()">转动转盘（{{this.havePlayTimes}}/5）</div>
    <div class="mask" @click.stop="closeMask" v-if="mark">
      <img src="../assets/ic_close.png" alt />
      <img class="right_top" src="../assets/ic_top_right.png" alt />
    </div>
  </div>
</template>

 <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script>
// document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
//   // 通过下面这个API隐藏右上角按钮
//   WeixinJSBridge.call("hideOptionMenu");
// });
import * as API from "@/http/common/api";
// import wxshare from "@/js/share.js";
import { setTimeout } from "timers";
export default {
  name: "my",
  data() {
    return {
      prizeList: [],
      userInfo: {},
      goodsList_rotate: [
        "goodsList_rotate0",
        "goodsList_rotate1",
        "goodsList_rotate2",
        "goodsList_rotate3",
        "goodsList_rotate4",
        "goodsList_rotate5",
        "goodsList_rotate6",
        "goodsList_rotate7"
      ],
      game_default: false,
      deg: 0, //旋转的度数
      goodsType: "",
      rotateDeg: "",
      havePlayTimes: 0, //转动了几次
      haveGetVipTimes: 0, //可领取会员次数
      rotateIndex: 0,
      mark: false
    };
  },
  methods: {
    //关闭 mask
    closeMask() {
      this.mark = false;
    },
    //开始游戏
    beginGame(data) {
      console.log("当前旋转deg=====", this.deg);

      this.luckyDial();
    },
    // 获取奖品规格
    getList() {
      this.$http(API.luckyReward, {
        type: "GET",
        params: {}
      }).then(res => {
        if (res.data.code == 0) {
          this.prizeList = res.data.Message;
        } else {
        }
      });
    },
    // 抽奖
    luckyDial() {
      if (this.havePlayTimes == 6) {
        this.$vux.toast.show({
          text: "明天再来呦",
          type: "text"
        });
        return;
      }
      this.$http(API.luckyDial, {
        type: "POST",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.Message == "今天分享转动次数已用完") {
              this.$vux.toast.show({
                text: "今天分享转动次数已用完",
                type: "text"
              });
              return;
            }
            if (res.data.Message != "分享朋友圈可以有抽奖哟") {
              this.game_default = true;
              this.deg = this.deg + 720 + res.data.Message * 30;
              this.rotateIndex = res.data.Message;
              setTimeout(() => {
                this.$vux.toast.show({
                  text:
                    "恭喜您！中奖" +
                    this.prizeList[res.data.Message].dialType +
                    "Q豆",
                  type: "text"
                });
              }, 2000);
              setTimeout(() => {
                this.game_default = false;
              }, 3000);
              this.rotaryReward();
              this.userfrequencies();
            } else {
              this.$vux.toast.show({
                text: "分享朋友圈可以有抽奖哟",
                type: "text"
              });
            }
          } else {
            this.$vux.toast.show({ text: res.data.Message, type: "text" });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    // 领取体验会员
    getUserMember() {
      this.$http(API.getUserMember, {
        type: "POST",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.Message != "转发朋友圈获取体验会员") {
          } else {
            this.$vux.toast.show({ text: res.data.Message, type: "text" });
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
        });
    },
    // 发放奖品
    rotaryReward() {
      this.$http(API.rotaryReward, {
        type: "POST",
        params: {
          userId: this.userInfo.userId,
          money: this.prizeList[this.rotateIndex].dialType
        }
      }).then(res => {
        if (res.data.code == 0) {
          // this.rotateIndex = 0;
        } else {
        }
      });
    },
    // 已转动次数
    userfrequencies() {
      this.$http(API.userfrequencies, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.havePlayTimes = res.data.Message;
          } else {
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 已转动次数
    selectCanMemberNumber() {
      this.$http(API.selectCanMemberNumber, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.haveGetVipTimes = res.data.Message;
          } else {
          }
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    // 已转动次数
    userfrequencies() {
      this.$http(API.userfrequencies, {
        type: "GET",
        params: {
          userId: this.userInfo.userId
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.havePlayTimes = res.data.Message;
        } else {
        }
      });
    },

    //分享
    share() {
      var url = window.location.href.split("#")[0];
      this.$http(API.getShareData, {
        type: "GET",
        params: {
          url: 'http://www.xiaozounihao.club/index.html'
        }
      }).then(res => {
        console.log(res);
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wx554b0a1adc8cc19c", // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录1
          jsApiList: [
            "updateAppMessageShareData",
            "updateTimelineShareData",
            // "getLocation"
          ]
        });
        // wx.checkJsApi({
        //   jsApiList: ["getLocation"],
        //   success: function(res) {
        //     if (res.checkResult.getLocation == false) {
        //       Toast(
        //         "你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！"
        //       );
        //       return;
        //     }
        //   },
        //   fail: function(res) {
        //     console.info("checkJsApi fail=" + JSON.stringify(res));
        //   }
        // });
        var that = this;
        wx.ready(function(res) {
          wx.checkJsApi({
            jsApiList: ["chooseImage"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
          });

          // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
          wx.updateAppMessageShareData({
            title: "聊Q小屋", // 分享标题
            desc: "分享获得VIP", // 分享描述
            link: window.location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "http://mxp.chinacmcp.com/html/images/shareBack.png", // 分享图标
            success: function() {
              that.mark = true;
            }
          });
          wx.updateTimelineShareData({
            title: "聊Q小屋", // 分享标题
            desc: "分享获得VIP", // 分享描述
            link: window.location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "http://mxp.chinacmcp.com/html/images/shareBack.png", // 分享图标
            success: function() {
              that.mark = true;
            }
          });
          // wx.updateAppMessageShareData = {
          //   //好友
          //   title: "聊Q小屋", // 分享标题
          //   desc: "分享获得VIP", // 分享描述
          //   link: window.location.href.split("#")[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          //   // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
          //   // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
          //   imgUrl: "http://mxp.chinacmcp.com/html/images/shareBack.png", // 分享图标
          //   fail: function(res) {
          //     alert(JSON.stringify(res));
          //   },
          //   success: function(res) {
          //     // alert(123123)

          //     setTimeout(function() {
          //       // that.$vux.toast.show({
          //       //   text: res.data.message,
          //       //   type: "text"
          //       // });
          //       that
          //         .$http(API.judgeUserShare, {
          //           //分享+1
          //           type: "GET",
          //           params: {
          //             userId: that.userInfo.userId
          //           }
          //         })
          //         .then(res => {
          //           if (res.data.code == 0) {
          //             that.$vux.toast.show({
          //               text: "分享成功",
          //               type: "text"
          //             });
          //           } else {
          //           }
          //         });
          //     }, 1000);
          //   }
          // };
          // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        });
      });
      // this.$http(API.getPrepayId, {
      //   type: "POST",
      //   params: {
      //     openId: this.$localStorage.get("openId"),
      //     moneyType:10,
      //     spbillCreateIp: returnCitySN["cip"],
      //     userId: this.userInfo.userId,
      //     payType: 1 //单独充值1   开通vip 2   开通svip3
      //   }
      // }).then(res => {
      //   if (res.data.code == 0) {

      //     wxshare(res.data.message, window.location.href);
      //   }
      // });
    }
  },
  computed: {
    diyConTitleStyle() {
      var dt = {
        transform: "rotate(" + -(45 * Number(this.rotateIndex) - 1080) + "deg)"
      };
      //过滤掉即删除掉空值的参数和数值
      // for (var i in dt) {
      //       dt[i]==""?delete(dt[i]):1
      // }
      console.log(dt);
      return dt;
    }
  },
  watch: {
    deg(newVal, oldVal) {
      this.goodsType = newVal;
      this.goodsType = this.diyConTitleStyle;
      console.log(this.goodsType);
    },
    mark(newVal, oldVal) {
      var that = this;
      if (newVal) {
        setTimeout(res => {
          if (that.mark) {
            that
              .$http(API.judgeUserShare, {
                //分享+1
                type: "GET",
                params: {
                  userId: that.userInfo.userId
                }
              })
              .then(res => {
                if (res.data.code == 0) {
                  that.mark = false;
                  that.$vux.toast.show({
                    text: "分享成功",
                    type: "text"
                  });
                } else {
                }
              });
          } else {
            that.mark = false;
          }
        }, 8000);
      }
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.getList();
    this.userfrequencies();
  },
  components: {}
};
</script>
<style scoped>
.cj_warp {
  width: 375px;
  height: 601px;
  padding-top: 77px;
  overflow: hidden;
  box-sizing: content-box;
}
#app {
  background: #fff !important;
}
.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: -1;
  background-color: #ffffff;
  overflow: hidden;
}
.choujiang_bing {
  width: 375px;
  height: 375px;
  position: absolute;
  margin: 0 auto;
  transition: transform 2s ease-out;
  z-index: 11;
  margin-bottom: -32px;
  /* transform: rotate(45deg) */
}

.choujiang_begin {
  position: absolute;
  top: 233px;
  left: 168px;
  width: 40px;
  height: 52px;
  z-index: 12;
}
.gameLog_title {
  color: #fff;
  font-size: 14px;
  text-align: center;
  margin: 12px 0;
}
.gameLog {
  position: absolute;
  width: 340px;
  bottom: 9px;
  left: 18px;
}
.gameLog_list {
  padding: 16px 14px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
}
.gameLog_item {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.gameLog_left {
  width: 120px;
}
.gameLog_center {
  width: 135px;
}
.gameLog_right {
  height: 25px;
  width: 60px;
  line-height: 11px;
}
.goodsList_warp {
  width: 310px;
  height: 310px;
  margin: 0 auto;
  position: absolute;
  left: 34px;
  top: 109px;
  z-index: 12;
  transition: transform 2s ease-out;
}
.goodsList {
  width: 73px;
  height: 300px;
  position: absolute;
  left: 116px;
  top: 5px;
  text-align: center;
}
.goodsList_rotate0 {
  transform: rotate(0deg);
}
.goodsList_rotate1 {
  transform: rotate(45deg);
}
.goodsList_rotate2 {
  transform: rotate(90deg);
}
.goodsList_rotate3 {
  transform: rotate(135deg);
}
.goodsList_rotate4 {
  transform: rotate(180deg);
}
.goodsList_rotate5 {
  transform: rotate(225deg);
}
.goodsList_rotate6 {
  transform: rotate(270deg);
}
.goodsList_rotate7 {
  transform: rotate(315deg);
}
.goodsList > view {
  text-align: center;
  color: #f32323;
  margin-top: 5px;
}
.goodsList > image {
  width: 35px;
  height: 35px;
  margin-top: 10px;
}
.goodsType {
  transform: rotate(-720deg);
}
.goldImg {
  width: 44px;
  height: 44px;
  margin: 0 auto;
}
.goldNum {
  color: #fff;
  margin: 0 auto;
  margin-top: 28px;
}
.activeBg {
  position: fixed;
  left: 0;
  top: 0;
  /* z-index: -1; */
  width: 375px;
  height: 601px;
}
.activeBg > img {
  width: 375px;
  height: 601px;
}
.hint {
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding-top: 0px;
  z-index: 13;
  display: block;
  position: relative;
}
.btn {
  margin: 0 auto;
  width: 199px;
  height: 35px;
  color: #fff;
  border-radius: 22px;
  text-align: center;
  font-size: 17px;
  line-height: 35px;
  background: #e64567;
  margin-top: 14px;
  position: relative;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  z-index: 9999;
}
.mask > img {
  width: 30px;
  height: 30px;
  margin: 20px;
}
.right_top {
  width: 70px !important;
  height: 70px !important;
  margin-right: 0px !important;
}
</style>
